import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import App from './App.vue'
import './styles/index.scss' // 引入全局样式，包含主题相关CSS变量
import { initThemeConfig } from './utils/theme'
import { elementPlusLocale, initI18nConfig } from './utils/i18n-config' // 导入国际化配置
import GlobalComponents from './components' // 导入全局组件
import { createThemeDirectives } from './hooks/useThemeDirectives' // 导入主题指令
import commonComponents from '@/components/common'
import fabricPlugin from './plugins/fabric' // 导入fabric插件

// 列表查询组件
import tableSearch from '@/components/table-search'


// 导入Element Plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

/**
 * 初始化主题设置
 * 应用启动时，从本地存储恢复用户的主题选择
 */
initThemeConfig()

/**
 * 初始化国际化配置
 * 设置日期和UI组件的语言为中文
 */
initI18nConfig()

/**
 * 更新Element Plus组件的主题
 * 使Element Plus组件能够跟随系统主题变化
 */
const updateElementUiTheme = () => {
  // 获取当前主题或使用默认主题
  const theme = localStorage.getItem('theme') || 'default'
  // 设置Element Plus的主题属性
  document.documentElement.setAttribute('data-el-theme', theme)
}

// 初始设置Element Plus主题
updateElementUiTheme()

/**
 * 监听本地存储变化
 * 当其他标签页更改主题时，当前页面也能同步更新
 */
window.addEventListener('storage', (e) => {
  // 只响应theme键的变化
  if (e.key === 'theme') {
    updateElementUiTheme()
  }
})

// 创建Vue应用实例
const app = createApp(App)

/**
 * 注册所有Element Plus图标为全局组件
 * 这样在模板中可以直接使用图标名称
 */
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

/**
 * 注册主题相关的自定义指令
 */
const themeDirectives = createThemeDirectives()
app.directive('theme-button', themeDirectives.themeButton)

// 使用插件并配置
app.use(ElementPlus, {
  locale: elementPlusLocale // 设置Element Plus的语言为中文
})
app.use(router)       // Vue Router
app.use(GlobalComponents) // 注册全局组件
app.use(commonComponents) // 注册通用组件
app.use(tableSearch) // 列表查询组件
app.use(fabricPlugin) // 使用fabric插件

// 挂载应用
app.mount('#app')
